<template>
  <div class="container">
    <h1 class="animate__animated animate__bounce">钩子week</h1>
    <button @click="a=true">显示</button>
    <button  @click="a=false">隐藏</button>
   <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceInUp"
  >
     <div v-if='a'>
        <h4>666666666666666666666666888888888888888888888888888</h4>
   </div>
  </transition>

<br/>
  <div>
      <button v-on:click="b = !b">
        Toggle
      </button>
      <transition name="abc">
        <p v-if="b">hello</p>
      </transition>
  </div>

    <table border="1" style="margin:auto">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>学校</th>
        </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in arr" :key="index" :class="index==num?'color':''" ref="abcolor">
        <td>{{item.user}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.age}}</td>
        <td>{{item.school}}</td>
      </tr>
      </tbody>
    </table>
    <button @click="tr3fun()">第三行变红色</button>
    <br/>
    ----------------------------------------------------
    <br>
  苹果  <input type="checkbox" name="" id="" value="苹果" v-model="checked">
  香蕉 <input type="checkbox" name="" id="" value="香蕉" v-model="checked">
  荔枝<input type="checkbox" name="" id="" value="荔枝" v-model="checked">
  哈密瓜  <input type="checkbox" name="" id="" value="哈密瓜" v-model="checked">
  <p>{{checked}}</p>

  <br>
  <div>
    <!-- watch监听练习 -->
   请输入美元： <input type="number" name="" id="" v-model="huilv.jinzi">汇率为：6.3602
  <p>人民币为{{price}}</p>
  <br>
  <br>
  <input type="text" v-model="str">
  <p>{{strhtml}}</p>
   </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      arr:[
          {
          user:'AA',
          sex:'男',
          age:'23',
          school:'二小'
        },
         {
          user:'BB',
          sex:'男',
          age:'58',
          school:'一中'
        },
         {
          user:'CC',
          sex:'女',
          age:'57',
          school:'一高'
        },
      ],
      num:0,
      a:true,
      b:true,
      checked:[],
      huilv:{
        jinzi:0,
        nihao:'hh'
      },
      price:0,
      str:'',
      strhtml:'',
    }
  },
  mounted(){
   
  },
  created(){
    this.arr.sort((a,b)=>{
      return a.age-b.age
    })

  },
  
  methods:{
    //  tr3fun(){
    //   if(this.num==2){
    //      this.$refs.abcolor.style.color="green";
    //   }
    // }
  },
// 监听
 watch:{
    // 方法类型，可以监听单数据，eg:str
    str(n,o){
      console.log(n,o)
      this.strhtml=n
    },
    // 属性中handler()传参实现新老值获取
     huilv:{
        handler(n,o){
          console.log(n.jinzi,o.jinzi);
          this.price = 6.3602*n.jinzi
        },
        // 要监听的数据为对象类型，则要深度监听
       deep:'true'
     },
  },
 
  components: {

  }
}
</script>

<style scoped>
table tr th,table tr td{
     width:160px;
     height:40px;
}
table .color{
  background-color: yellow;
}
.abc-enter-active, .abc-leave-active {
  transition: opacity 5s;
  background-color: brown;
}
.abc-enter, .abc-leave-to /* .abc-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
